<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Promise</title>
  </head>
  <body>
    <script>
      /*
          Promise
            -常见误区回调地狱
            -采用then方法的链式操作
            -Promise then方法返回的是一个新的Promise
            -then方法可以return 一个自定义的Promise
            -后面then方法就是在为上一个then方法返回的Promise注册回调
             前一个then方法中回调函数的返回值会作为后一个then方法的回调参数
             若果毁掉中返回的是Promise，那后面的then方法会等待他的结束
            -catch 捕获异常
                -任何一个异常都会向后传递
                -应该在代码中明确的捕获每一个异常
            -resolve方法 可以返回一个成功的Promise 
            -reject方法 可以返回一个失败的Promise 
            -all方法 接收一个数组数组的每一项是一个Promise对象
            -race方法  作用跟all差不多
                -all是所有任务都完成
                -race 只要有一个完成（第一个）
                -可以通过race方法控制请求时间
            -一个Promise对象没有任何操作也是异步的还是会进入回调队列
            -Promise执行时序比较特殊 是作为微任务执行的
                -微任务能提高整体的响应能力从而提升性能
                -MutationObserver
                -process.nextTick
            -补充 settimeout是以宏任务执行的  大部分异步调用
        */
      //封装ajax
      Promise.resolve("foo").then((v) => {
        console.log(v);
      });

      Promise.reject("err").catch((err) => {
        console.log(err);
      });
      function ajax(url) {
        return new Promise((resolve, reject) => {
          const xhr = new XMLHttpRequest();
          xhr.open("get", url);
          xhr.responseType = "json";
          xhr.onload = function () {
            if (this.status === 200) {
              resolve(this.response);
            } else {
              reject(new Error(this.statuseText));
            }
          };
          xhr.send();
        });
      }

      ajax("./nodes/data.json")
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(arr);
        });
      let promise = Promise.all([
        ajax("./nodes/data.json"),
        ajax("./nodes/data2.json"),
      ]);
      promise
        .then((v) => {
          console.log(v);
        })
        .catch((e) => {
          console.log(e);
        });
    </script>
  </body>
</html>
